@import "index";
@import "panel";
@import "login";
@import "editor";
@import "detail";
@import "datasets";
$header-bg-color: #394263;
$header-a-color: #fff;
$header-logo-color: #ff5555;
// @font-face{
//       font-family: 'Klartext Mono Light';
//     	src: url('../fonts/KlartextMono-Light-webfont.eot');
//     	src: url('../fonts/KlartextMono-Light-webfont.eot?#iefix') format('embedded-opentype'),
//     			 url('../fonts/KlartextMono-Light-webfont.woff2') format('woff2'),
//     			 url('../fonts/KlartextMono-Light-webfont.woff') format('woff'),
//     			 url('../fonts/KlartextMono-Light-webfont.ttf') format('truetype'),
//     			 url('../fonts/KlartextMono-Light-webfont.svg#klartext_monolight') format('svg');
//     	font-weight: normal;
//     	font-style: normal;
//     }

*, *:before, *:after {
    font-family: 'Klartext Mono Light', "Pingfang SC", "Open Sans", "Lantinghei SC";
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 7em;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: $header-bg-color;
    h1{
      display: inline-block;
      line-height: 2.33em;
      margin: 0 0 0 2.6em;
      padding: 0 1em;
      float: left;
      color: $header-a-color;
      text-align: center;
      font-size: 3em;
      background-color: $header-logo-color;
      a {
          color: $header-a-color;
          text-decoration: none;
      }
    }
    nav {
        display: inline-block;
        float: right;
        margin: 3em 3em;
        a {
            line-height: 2em;
            margin-left: 0.8em;
            font-weight: 300;
            font-size: 1.4em;
            color: $header-a-color;
        }
        input{
          width: 130px;
          height: 30px;
          border: 1px solid;
          border-radius: 5px;
        }
    }
}

footer {
  text-align: center;
  color: #aaa;
}

.main {
    width: 90%;
    margin: 0 auto;
    margin-top: 140px;
    margin-bottom: 50px;
}
@media all and (max-width: 960px) {
    header{
      h1 {
          display: block;
          float: none;
          margin: auto;
          height: 60px;
          font-size: 30px;
          padding: 0px;
      }
      nav {
          display: block;
          float: none;
          height: 60px;
          text-align: center;
          margin: auto;
          a {
              font-size: 20px;
              margin: 10px 10px 0px 10px;
          }
      }
    }

}

@media all and (max-width: 560px) {
    .main {
        width: 100%;
    }
    header nav a {
        font-size: 20px;
        margin: 20px 5px 0px 5px;
    }
    
    .col-3 {
        float: left;
        display: block;
        margin-right: 3.16844%;
        width: 100%;
    }
    .col-3:last-child {
        margin-right: 0;
    }
}

.error {
    margin: 10px;
    color: red;
}
.hidden {
    display: none;
}
.breakLine {
    width: 100%;
    margin: 0 auto;
    height: 1px;
    margin-top: 20px;
    margin-bottom: 40px;
    background-color: rgba(0, 0, 0, 0.3);
}

.csbutton {
    padding: 6px 10px;
    margin-left: 10px;
    border-radius: 3px;
    background-color: #bca;
    cursor: pointer
}
.csauthor {
    text-decoration: none;
    color: #80bd01;
    font-style: italic;
}
